<template>
  <div class="tuijian">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <ArticleList :datas="datas" ></ArticleList>
      </van-list>
    </van-pull-refresh>
   
    
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList.vue';

import myAxios from '@/interceptors';

export default {
    name: 'TuiJian',
    components:{
      ArticleList
    },
    data(){
        return {
          pageSize:10,
          current:1,
          pageTotal:0,
          loading: false,
          finished: false,
          refreshing:false,
          datas:[],
        }
    },
    methods:{
      async getData() {
        try{
          const res =  await myAxios.get(`h5/interview/query?current=${this.current}&pageSize=${this.pageSize}&sorter=weight_desc`)

          const {data:{rows:row}} = res
            console.log(row)
            this.datas.push(...row)
            this.pageTotal = res.data.pageTotal
            
        }catch(err){
          console.log(err)
          this.$router.push('/')
        }
        if(this.current >= this.pageTotal){
          this.finished = true
        }
        this.refreshing=false
        this.current++
        
      },
      async onLoad(){
        console.log('onLoad')
        // this.getData()
        await this.getData()
        
        this.loading = false;
      },
      onRefresh(){
        console.log('onRefresh')
        this.current = 1
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.datas = []
        this.getData()
      },
      
    }
}
</script>

<style>
      

</style>